<template>
  <el-card class="box-card">
    <div class="dflex justify-between">
      <div>
        <div class="f16999">{{ title }}</div>
        <div class="f28333 lh60">{{ props.count || 0 }}</div>
        <div class="f14999 dflex">
          <span class="flexShrink_0">今日</span>
          <div class="increase flexShrink_0">
            <img :src="increase" alt="" srcset="" />
            <span>{{ props.todayTotal }}</span>
          </div>
          <span class="flexShrink_0">昨日</span>
          <div class="minus flexShrink_0">
            <img :src="minus" alt="" srcset="" />
            <span>{{ props.yesterdayTotal }}</span>
          </div>
        </div>
      </div>
      <div>
        <img :src="icon" alt="" srcset="" />
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import dashboard_1 from "@/assets/dashboard/dashboard_1.svg"
import increase from "@/assets/dashboard/increase.svg"
import minus from "@/assets/dashboard/minus.svg"
import { DashboardData } from "@/hooks/useDashboard"

interface Props {
  title?: string
  icon?: string
  count?: number
  todayTotal?: number
  yesterdayTotal?: number
}
const props = withDefaults(defineProps<Props>(), {
  title: "用户数",
  icon: dashboard_1
})
</script>
<style lang="scss" scoped>
.box-card {
  .lh60 {
    line-height: 60px;
  }

  .increase_t {
    flex-shrink: 0;
  }

  .increase {
    color: #37bb3f;
    padding: 0 10px;

    img {
      padding: 0 5px;
    }

    margin-right: 20px;
  }

  .minus {
    color: #e56268;
    padding: 0 10px;

    img {
      padding: 0 5px;
    }
  }
}
</style>
